<template>
  <div style="margin-top: 200px;">
    <van-cell-group>
      <van-field
          v-model="username"
          required
          label="用户名"
          placeholder="请输入用户名"
      />
      <van-field
          style="margin-top: 20px"
          type="password"
          required
          readonly
          clickable
          label="密码"
          placeholder="请输入密码"
          :value="password"
          @touchstart.native.stop="show = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
          v-model="password"
          :show="show"
          @blur="show = false"
      />
    </van-cell-group>
    <div style="background-color: #FFFFFF;width: 100%;height: 140px">
      <van-button @click="goLogin"
                  style="color: #FFFFFF;font-size: 13pt; width: 380px;height: 40px;margin-top: 30px;
                    margin-left: 3px;background-color: #4EA9CB">登录</van-button>
      <van-button @click="goRegister"
                  style="color: #FFFFFF;font-size: 13pt; width: 380px;height: 40px;margin-top: 10px;
                    margin-left: 3px;background-color: #F0A439">注册</van-button>
    </div>
  </div>
</template>

<script>
import {userLoginName,userLoginPassword} from "@/components/api/user/user";

export default {
  data() {
    return {
      value: '',
      username: '',
      password: '',
      show: false,
    };
  },
  methods: {

    goLogin() {
      if (this.username !=''){
        if (this.password !=''){
          userLoginName(this.username).then(res => {
            if (res.data != null){
              console.log(res)
              const id=res.data.id;
              const password=this.password;
              userLoginPassword(id,password).then(response => {
                if (response.data != 0){
                  console.log(response)
                  localStorage.setItem('login', JSON.stringify(res.data.id))
                  this.$message({
                    message: "登录成功",
                    type: 'success',
                    duration: 800
                  })
                  this.$router.push("/personalUser")
                }else if (response.data == 0){
                  this.$message({
                    message: "密码错误，请重新输入密码",
                    type: 'error',
                    duration: 800
                  });
                }
              });
            }else if (res.data == null){
              this.$message({
                message: "用户名错误,请填写正确用户名",
                type: 'error',
                duration: 800
              });
            }
          })
        }else if (this.password ==''){
          this.$message({
            message: "密码不能为空",
            type: 'error',
            duration: 800
          });
        }
      }else if (this.username ==''){
        this.$message({
          message: "用户名不能为空",
          type: 'error',
          duration: 800,
        });
      }
    },
    goRegister(){
      this.$router.push("/registerPage")
    },
    login(){
      var user = JSON.parse(window.localStorage.getItem("personalUser"));
      if (user == null) {
        this.$router.push({
          path: '/personalUser',
        })
        return;
      }
    }
  }
};
</script>

<style>

</style>
